<template>
  <div class="registercom">
    <div class="zhuce">
        <form @submit.prevent="addVuex()">
            <h3>用户注册</h3>
            <p>
                <input v-model="username" type="text" placeholder="请输入用户名" required/>
            </p>
            <p>
                <input v-model="phone" type="tel"  placeholder="请输入手机号" pattern="^1[34578]\d{9}$" required/>
            </p>
            <p>
            <input v-model="email" type="email"  placeholder="请输入邮箱" pattern="^\w+@[a-z0-9]+\.[a-z]{2,4}$" required/>
            </p>
            <p>
            <input v-model="pwd" type="password" placeholder="请输入密码" required/>
            </p>
            <p>
            <input v-model="confirmpwd" type="password" placeholder="再次确认密码" required/>
            </p>
            <input type="checkbox" v-model="isRem"/>
          <span>是否同意本系统服务条款</span>
            <article>
            <input type="submit" value="注册"/>
            </article>
        </form>

    </div>
  </div>
</template>

<script>


export default {
   name : "RegisterCom",
   //所有控件必填：两次密码必须一致   ===>  添加数据到vuex里面
   //用户自己去跳转
   data(){
      return{
            username:'',
            phone:'',
            email:'',
            pwd:'',
            confirmpwd:'',
            isRem : false,
      }
   },
   // computed :{
   //    registedUsers(){
   //    return this.$store.state.user;
   //    }
   // },
   methods:{
      //表单验证
      addVuex(){
         if (!this.validateForm()) return;

         const newUser = {
            username : this.username,
            phone : this.phone,
            email:this.email,
            password:this.pwd
         };

         //提交到Vuex
         this.$store.commit('addUser',newUser);

         // console.log(this.registedUsers);
      
         alert('注册成功，即将返回登陆页')
         this.$router.push('/login')
      },
      validateForm(){
      //密码验证
      if (this.pwd !== this.confirmpwd) {
        alert("两次输入的密码不一致");
        return false;
      }

      //勾选框
      if (!this.isRem) {
        alert("请同意服务条款");
        return false;
      }

      return true;
    },
    
   }
}
</script>

<style scoped>
 .registercom{
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
 }
 .registercom .zhuce{
    width: 60%;
    overflow: hidden;
    border: 5px solid #008b8b;
    border-radius: 8px;
    margin: 25px auto;
 }
 .registercom .zhuce p,.registercom .zhuce article{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 50px;
    margin-top: 25px;
 }
 .registercom .zhuce article input{
    width: 80%;
    height: 70%;
    margin-bottom: 25px;
 }
 .registercom .zhuce p input{
    width: 80%;
    height: 70%;
 }
</style>